<template>
    <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" :file-list="fileList" :class="{disabled:dialogImageUrl}" :on-change="fileChange">
      <el-icon><Plus /></el-icon>
  
      <template #file="{ file }">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="dialogImageUrl" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <el-icon><zoom-in /></el-icon>
            </span>
            <span
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <el-icon><Delete /></el-icon>
            </span>
          </span>
        </div>
      </template>
    </el-upload>
  
    <el-dialog v-model="dialogVisible">
        <div style="height: 500px;">
            <img w-full :src="dialogImageUrl" alt="Preview Image" style="max-width: 100%; max-height: 100%;object-fit: cover;"/>
        </div>
      
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'
  import type { UploadFile } from 'element-plus'

  const props = defineProps(["image"])
  const emit = defineEmits(['change_files', ])
  
  const dialogImageUrl = props.image?ref(props.image):ref("")
  const dialogVisible = ref(false)
  const fileList = props.image?ref([{name: "a.png", url: props.image}]):ref([])
  const uploadDisabled = ref(false)

  const fileChange = (file, fileLi) => {
    fileList.value = fileLi
    uploadDisabled.value = true
    dialogImageUrl.value = file.url!
    emit("change_files", fileList.value)
  }
  
  const handleRemove = (file: UploadFile) => {
    fileList.value = []
    uploadDisabled.value = false
    dialogImageUrl.value = ""
    emit("change_files", fileList.value)
  }
  
  const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
  }
  onMounted(()=>{
    console.log(fileList.value)
    
  })
  

  </script>

  <style lang="scss">
  .disabled .el-upload--picture-card {
    display: none;
    }
    .el-upload-list__item{
      display: flex;
      justify-content: center;
    }
</style>